<template>
  <div class="main-main readonly">
    <el-container style="height: 100%" v-loading="loading">
      <el-main>
        <el-form ref="form" :model="form" label-width="140px" :rules="rules">
          <el-row>
            <el-col :span="3" class="d-flex">
              <Patterns :iconShow="judge(form.zb_ggfbsj, form.zb_zbwcsj)" />
              <span style="margin-left: 10px" class="d-center">招标阶段</span>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="zb_ggfbsj" label="公告发布时间">
                <el-date-picker
                  :disabled="is_sealed == 2"
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.zb_ggfbsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="是否完成">
                <el-radio
                  size="medium"
                  v-model="radio0"
                  label="1"
                  :disabled="is_sealed == 2"
                  >是</el-radio
                >
                <el-radio
                  size="medium"
                  v-model="radio0"
                  label="2"
                  :disabled="is_sealed == 2"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="radio0 == 1">
              <el-form-item
                prop="zb_zbwcsj"
                label="招标完成时间"
                :rules="
                  radio0 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.zb_zbwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" class="d-flex">
            <el-col :span="3"></el-col>
            <el-col :span="14">
              <el-form-item prop="sjdwmc" label="设计单位">
                <el-input
                  size="medium"
                  v-model="form.sjdwmc"
                  :disabled="is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" class="d-end" style="margin-bottom: 20px">
              <el-button
                size="medium"
                type="primary"
                @click="save"
                v-if="is_sealed == 1"
                >保存</el-button
              >
              <!-- <el-button size="medium" type="info" v-if="is_sealed == 2">已封存</el-button> -->
            </el-col>
          </el-row>
          <el-row class="d-flex">
            <el-col :span="3"></el-col>
            <el-col :span="14">
              <el-form-item prop="zxsc_dwmc" label="咨询审查单位名称">
                <el-input
                  size="medium"
                  v-model="form.zxsc_dwmc"
                  :disabled="is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="d-flex">
              <Patterns :iconShow="judge(form.wy_jhwcsj, form.wy_sjwcsj)" />

              <span style="margin-left: 10px" class="d-center">外业</span>
              <span class="line"></span>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="wy_jhwcsj" label="计划完成时间">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.wy_jhwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="name" label="是否完成">
                <el-radio
                  size="medium"
                  v-model="radio1"
                  label="1"
                  :disabled="is_sealed == 2"
                  >是</el-radio
                >
                <el-radio
                  size="medium"
                  v-model="radio1"
                  label="2"
                  :disabled="is_sealed == 2"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="radio1 == 1">
              <el-form-item
                prop="wy_sjwcsj"
                label="实际完成时间"
                :rules="
                  radio1 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.wy_sjwcsj"
                  type="date"
                  placeholder="选择日期"
                  :disabled="is_sealed == 2"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="d-flex">
              <Patterns :iconShow="judge(form.ny_jhwcsj, form.ny_sjwcsj)" />

              <span style="margin-left: 10px" class="d-center">内业</span>

              <span class="line"></span>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="ny_jhwcsj" label="计划完成时间">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.ny_jhwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="name" label="是否完成">
                <el-radio
                  size="medium"
                  v-model="radio2"
                  label="1"
                  :disabled="is_sealed == 2"
                  >是</el-radio
                >
                <el-radio
                  size="medium"
                  v-model="radio2"
                  label="2"
                  :disabled="is_sealed == 2"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="radio2 == 1">
              <el-form-item
                prop="ny_sjwcsj"
                label="实际完成时间"
                :rules="
                  radio2 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.ny_sjwcsj"
                  type="date"
                  placeholder="选择日期"
                  :disabled="is_sealed == 2"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="d-flex">
              <Patterns :iconShow="judge(form.zxsc_jhwcsj, form.zxsc_sjwcsj)" />

              <span style="margin-left: 10px" class="d-center">咨询审查</span>

              <span class="line"></span>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="zxsc_jhwcsj" label="计划完成时间">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.zxsc_jhwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="name" label="是否完成">
                <el-radio
                  size="medium"
                  v-model="radio3"
                  label="1"
                  :disabled="is_sealed == 2"
                  >是</el-radio
                >
                <el-radio
                  size="medium"
                  v-model="radio3"
                  label="2"
                  :disabled="is_sealed == 2"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="radio3 == 1">
              <el-form-item
                prop="zxsc_sjwcsj"
                label="实际完成时间"
                :rules="
                  radio3 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.zxsc_sjwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="d-flex">
              <Patterns :iconShow="judge(form.pf_jhwcsj, form.pf_sjwcsj)" />
              <span style="margin-left: 10px" class="d-center">批复</span>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="pf_jhwcsj" label="计划完成时间">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.pf_jhwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="name" label="是否完成">
                <el-radio
                  size="medium"
                  v-model="radio4"
                  label="1"
                  :disabled="is_sealed == 2"
                  >是</el-radio
                >
                <el-radio
                  size="medium"
                  v-model="radio4"
                  label="2"
                  :disabled="is_sealed == 2"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="radio4 == 1">
              <el-form-item
                prop="pf_sjwcsj"
                label="实际完成时间"
                :rules="
                  radio4 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="medium"
                  v-model="form.pf_sjwcsj"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  :disabled="is_sealed == 2"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="3"></el-col>
            <el-col :span="14">
              <el-form-item
                prop="pf_dw"
                label="批复单位"
                :rules="
                  radio4 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-input
                  size="medium"
                  v-model="form.pf_dw"
                  :disabled="is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="d-flex">
            <el-col :span="3"></el-col>

            <el-col :span="14">
              <el-form-item
                prop="pf_jine"
                label="批复金额(万元）"
                :rules="
                  radio4 == 1
                    ? [{ required: true, message: '该值不能为空' }]
                    : null
                "
              >
                <el-input
                  size="medium"
                  v-model="form.pf_jine"
                  :disabled="is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row class="d-flex">
            <el-col :span="3"></el-col>
            <el-col :span="14">
              <el-form-item prop="bz" label="备注">
                <el-input
                  size="medium"
                  v-model.trim="form.bz"
                  placeholder="未完成原因/特殊情况说明"
                  :disabled="$route.query.is_sealed == 2"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="d-flex">
            <el-col :span="3"></el-col>
            <el-col :span="21" :class="{ red: radio4 == 1 }">
              <el-form-item label="上传附件">
                <uploader
                  :fileslists="fileslist"
                  :options="options"
                  :file-status-text="statusText"
                  :fileurl="$updata"
                  class="uploader-example"
                  ref="uploader"
                  :app="is_sealed == 1"
                  @file-success="fileSuccess"
                  @file-remove="remove"
                ></uploader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Patterns from "@/components/patterns";
import mixinsFile from "@/mixins/uploadFile.js";

export default {
  mixins: [mixinsFile],
  props: ["xm_id", "xmmc"],

  components: {
    Patterns,
  },
  data() {
    return {
      form: {},
      dialogImageUrl: "",
      // dialogVisible: false,
      disabled: false,
      fileslist: [],
      radio0: "2",
      radio1: "2",
      radio2: "2",
      radio3: "2",
      radio4: "2",
      is_sealed: 2,

      rules: {
        // sjdwmc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // wy_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // ny_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // zxsc_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // pf_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
      },
      rulesPf: {
        // sjdwmc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // wy_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // ny_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // zxsc_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // pf_jhwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
        // pf_dw: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // pf_jine: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // pf_sjwcsj: [
        //   { required: true, message: "该值不能为空", trigger: "blur" },
        // ],
      },
      loading: false,
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false,
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      },
      //上传
    };
  },
  methods: {
    search() {
      this.loading = true;
      this.$get("/api/QqCbsj/index", { xm_id: this.xm_id }).then((res) => {
        if (res.code == 200 && res.data) {
          if (res.data.ny_jhwcsj == "0000-00-00") res.data.ny_jhwcsj = "";
          if (res.data.pf_jhwcsj == "0000-00-00") res.data.pf_jhwcsj = "";
          if (res.data.wy_jhwcsj == "0000-00-00") res.data.wy_jhwcsj = "";
          if (res.data.zxsc_jhwcsj == "0000-00-00") res.data.zxsc_jhwcsj = "";
          if (res.data.zb_zbwcsj == "0000-00-00") res.data.zb_zbwcsj = "";
          this.radio0 = res.data.zb_zbwcsj ? "1" : "2";
          this.radio1 = res.data.wy_sjwcsj ? "1" : "2";
          this.radio2 = res.data.ny_sjwcsj ? "1" : "2";
          this.radio3 = res.data.zxsc_sjwcsj ? "1" : "2";
          this.radio4 = res.data.pf_sjwcsj ? "1" : "2";
          this.form = res.data;
          this.fileslist = res.data.files ? res.data.filesarr : [];
        } else {
          this.form = {};
          this.fileslist = [];
        }
        this.loading = false;
      });
    },
    judge(jh, sj) {
      var date = new Date(jh);
      if (sj) {
        return 1;
      } else if (jh && new Date() > date) {
        return 2;
      } else {
        return 3;
      }
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.fileslist.length == 0 && this.radio4 == 1) {
            this.$message({
              type: "error",
              message: "请上传附件",
            });
            return;
          }
          this.loading = true;
          //上传参数组合
          let fileUrl = this.fileslist.map((v) => {
            return v.path;
          });
          this.form.files = fileUrl.join(",");

          //上传参数组合
          delete this.form.filesarr;
          this.form.xm_id = this.xm_id;
          this.$post("/api/QqCbsj/actions", this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    //上传组件移除返回
    remove(index) {
      this.fileslist.splice(index, 1);
    },
    //上传成功返回
    fileSuccess(rootFile, file, message, chunk) {
      if (JSON.parse(message).state == "success") {
        this.fileslist.push({
          path: JSON.parse(message).code,
          name: chunk.file.name,
        });
      } else {
        this.$message({
          message: chunk.file.name + JSON.parse(message).code,
          type: "error",
        });
      }
    },
  },
  mounted() {
    this.search();
  },
  computed: {
    // xm_id() {
    //   return this.xm_id;
    // },
    // xmmc() {
    //   return this.xmmc;
    // }
  },
  watch: {
    xm_id() {
      this.search();
    },
    radio1(news) {
      if (news == 2) {
        this.form.wy_sjwcsj = null;
      }
    },
    radio2(news) {
      if (news == 2) {
        this.form.ny_sjwcsj = null;
      }
    },
    radio3(news) {
      if (news == 2) {
        this.form.zxsc_sjwcsj = null;
      }
    },
    radio4(news) {
      if (news == 2) {
        this.form.pf_sjwcsj = null;
      }
    },
  },
};
</script>

<style scoped lang="less">
.main-main {
  width: 100%;
  height: 500px;
  .click {
    width: 100px;
    height: 100px;
    background: #ccc;
    cursor: pointer;
    position: absolute;
    right: 0;
    &:hover {
      border: 1px dashed #4098ff;
    }
  }
  .line {
    width: 2px;
    height: calc(100% - 40px);
    position: absolute;
    background: #ccc;
    bottom: 0;
    left: 20px;
  }
  .red {
    position: relative;
    &::before {
      top: 6px;
      left: 40px;
      color: red;
      content: "*";
      position: absolute;
      margin-left: 4px;
      // font-weight: 700;
      line-height: 1.8em;
    }
  }
}
</style>